<template>
  <div>
    <!-- 商品分类相关操作 -->
    <div>
      <el-form :inline="true" :model="searchParam" class="demo-form-inline">
        <el-form-item label="分类编号">
          <el-input v-model="searchParam.productCategoryId" placeholder="分类编号"></el-input>
        </el-form-item>
        <el-form-item label="分类名称">
          <el-input v-model="searchParam.productCategoryName" placeholder="分类名称"></el-input>
        </el-form-item>
        <!-- 查询按钮 -->
        <el-form-item>
          <el-button @click="search">查询</el-button>
        </el-form-item>
        <!-- 清空查询按钮-->
        <el-form-item>
          <el-button @click="clearSearchParam">重置</el-button>
        </el-form-item>
        <br>
        <!-- 添加商品按钮 -->
        <el-form-item>
          <el-button round @click="addDialog">添加商品</el-button>
        </el-form-item>
        <!-- 批量删除按钮 -->
        <el-form-item>
          <el-button round @click="deleteBatch">批量删除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 商品分类对话框 -->
    <div>
      <el-dialog title="商品信息" :visible.sync="dialog.visible" width="30%">
        <el-form :model="dialog.form">
          <el-form-item label="分类名称：" label-width="20%">
            <el-input v-model="dialog.form.productCategoryName" autocomplete="off"
                      style="width: 90%"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialog.visible = false;clearDialogFrom()">取 消</el-button>
          <!-- 添加商品分类确认按钮 -->
          <el-button type="primary" @click="addProductCategory" v-if="dialog.showAddProductCategoryButton">确 认
          </el-button>
          <!-- 编辑商品分类确认按钮 -->
          <el-button type="primary" @click="alterProductCategory" v-if="dialog.showAlertProductCategoryButton">确 认
          </el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 商品分类展示 -->
    <div>
      <el-table :data="productCategory" @selection-change="handleSelectionChange" ref="table" :row-key="getRowKeys"
                style="width: 100%">
        <!-- 多选列 -->
        <el-table-column type="selection" align="center" width="50" :reserve-selection="true"></el-table-column>
        <!-- 第一列 -->
        <el-table-column align="center" width="285" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="alterDialog(scope.row)">编辑</el-button>
            <el-button type="text" size="small" style="color: #ff5555" @click="del(scope.row.productCategoryId)">删除
            </el-button>
          </template>
        </el-table-column>
        <!-- 其他列 -->
        <el-table-column prop="productCategoryId" align="center" label="分类编号"></el-table-column>
        <el-table-column prop="productCategoryName" align="center" label="分类名称"></el-table-column>
      </el-table>
    </div>
    <!-- 分页栏目 -->
    <div>
      <el-pagination
          @size-change="pageSizeChange"
          @current-change="pageNumChange"
          :current-page="searchParam.pageNum"
          :page-size="searchParam.pageSize"
          :page-sizes="[5, 10, 20, 40, 80, 160]"
          :total="searchParam.total"
          layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </div>
  </div>
</template>

<script>

import axiosUtil from "@/utils/axiosUtil";

export default {
  name: 'classifyView',
  data() {
    return {
      /* 商品分类相关操作 */
      // 分页查询参数
      searchParam: {
        productCategoryId: null,
        productCategoryName: null,
        pageNum: 1,
        pageSize: 5,
        total: 0,
      },
      /* 商品分类对话框 */
      // 商品分类对话框
      dialog: {
        // 对话框是否显示，false：隐藏
        visible: false,
        // 商品分类信息
        form: {
          productCategoryName: null,
        },
        // 商品分类按钮展示
        showAddProductCategoryButton: false,
        showAlertProductCategoryButton: false
      },
      /* 商品分类展示 */
      // 商品分类展示数据
      productCategory: [],
      // 多选行
      selectedRow: [],
      /* 其他 */
      // 令牌
      token: null,
    };
  },
  created() {
    this.search();
  },
  methods: {
    /* 商品分类相关操作 */
    // 查询
    search() {
      axiosUtil.get("/productCategory/search", {params: this.searchParam}).then(res => {
        if (res["code"] === '1') {
          this.productCategory = res.data.list;
          this.total = res.data.total;
        }
      })
    },
    // 重置查询
    clearSearchParam() {
      this.searchParam.productCategoryId = null;
      this.searchParam.productCategoryName = null;
      this.searchParam.pageNum = 1;
      this.searchParam.pageSize = 5;
      this.search(this.searchParam);
    },
    // 打开添加对话框
    addDialog() {
      this.clearDialogFrom();
      this.dialog.showAddProductCategoryButton = true;
      this.dialog.showAlertProductCategoryButton = false;
      // 打开对话框
      this.dialog.visible = true;
    },
    deleteBatch() {
      this.$confirm('此操作将永久删除选择商品分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.selectedRow.length === 0) {
          this.$message.warning('你未勾选要删除的商品')
          return
        }
        axiosUtil.post("/productCategory/deleteBatch", this.selectedRow).then(res => {
          if (res['code'] === "1") {
            // 刷新商品
            this.search();
            this.$message.success('删除成功!');
          } else {
            this.$message.error(res['msg'])
          }
        })
      }).catch(() => {
        this.$message.info('已取消删除');
      });

    },
    /* 商品分类对话框 */
    // 清空对话框表单
    clearDialogFrom() {
      this.dialog.form = {
        productCategoryName: null,
      }
    },
    // 添加商品分类
    addProductCategory() {
      axiosUtil.post("/productCategory/add", this.dialog.form).then(res => {
        if (res["code"] === '1') {
          // 刷新商品
          this.search();
          this.$message.success('操作成功');
        } else {
          this.$message.error(res['msg']);
        }
      })
      // 清空表单方便下次输入
      this.clearDialogFrom()
      // 关闭对话框
      this.dialog.visible = false
    },
    // 修改商品分类
    alterProductCategory() {
      axiosUtil.post("/productCategory/alter", this.dialog.form).then(res => {
        if (res["code"] === '1') {
          // 刷新商品
          this.search();
          this.$message.success('操作成功');
        } else {
          this.$message.error(res['msg']);
        }
      })
      // 清空表单方便下次输入
      this.clearDialogFrom()
      // 关闭对话框
      this.dialog.visible = false
    },
    /* 商品分类展示 */
    // 批量选中商品
    handleSelectionChange(val) {
      // console.info('选中的商品：', this.selectedRow)
      this.selectedRow = val;
    },
    // 获取选中当前行的主键
    getRowKeys(row) {
      return row.productId;
    },
    // 打开修改对话框
    alterDialog(obj) {
      this.dialog.form = obj;
      this.dialog.showAddProductCategoryButton = false;
      this.dialog.showAlertProductCategoryButton = true;
      // 打开对话框
      this.dialog.visible = true
      // 刷新商品
      this.search();
    },
    // 删除商品分类
    del(productCategoryId) {
      this.$confirm('此操作将永久删除该商品分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axiosUtil.delete(`/productCategory/delete/${productCategoryId}`).then(res => {
          if (res['code'] === "1") {
            // 刷新商品
            this.search();
            this.$message.success('删除成功!');
          } else {
            this.$message.error(res['msg'])
          }
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      });
    },
    /* 分类栏目*/
    // 分页查询
    pageSizeChange(pageSize) {
      this.searchParam.pageSize = pageSize;
      this.search(this.searchParam);
    },
    pageNumChange(pageNum) {
      this.searchParam.pageNum = pageNum;
      this.search(this.searchParam);
    },
  },
  mounted() {
    // 页面加载时保存 token
    let user = localStorage.getItem("user");
    this.token = JSON.parse(user).token;
    // console.log(this.token)
  }
}
</script>
